<template>
  <div >
      <div class="wrapper" :style="{height:getWindowHeight+'px'}">
             <cube-scroll
              ref="scroll"
              :data="data"
              :options="options"
              @pulling-up="onPullingUp"
              >
              <div class="nav">
                  <div class="nav_wrapper">
                      <div class="item">
                          提现记录
                      </div>
                  </div>
              </div>
              <div class="jifen_bg" :style="jifen_bg">
                  <div>
                      <p>钱包余额：{{people_amount}} </p>
                      <p>已提现金额：{{ok_amount}}</p>
                      <p>申请中金额：{{in_amount}}</p>
                  </div>
              </div>
              <div class="nav_date" @click="showTimePicker">
                  <a href="javascript:;">{{year_selected}}-{{month_selected}} <i :style="down_icon"></i> </a>
              </div>

                <div class="wrapper" v-for="(item,index) in data">
                    <div class="listfl border-bottom-1px">
                        <div class="list_wp">
                            <div class="touxiang">
                                <img :src="user_info.headimgurl" alt="">
                            </div>
                            <div class="content_right">
                                <div class="top">
                                    <p class="user_name">{{user_info.nickname}}</p>
                                    <p class="jifen">{{item.amount}}</p>
                                </div>
                                <p class="info">{{item.withdraw_info}}</p>
                                <p class="date_p">{{item.timemsg}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </cube-scroll>
      </div>
  </div>

</template>
<script>
export default {
    data(){
        return{
            jifen_bg:{
                backgroundImage: "url(" + require("../../assets/page9_bg@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            down_icon:{
                backgroundImage: "url(" + require("../../assets/down_icon@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            people_amount:0,
            in_amount:0,
            ok_amount:0,
            zw:0,
            zh:0,
            data:[],
            user_info:[],
            people_info:[],
            page:1,
            maxLen:33,
            year_list:[
              {text:2015,value:2015},
              {text:2016,value:2016},
              {text:2017,value:2017},
              {text:2018,value:2018},
              {text:2019,value:2019},
              {text:2020,value:2020},
              {text:2021,value:2021},
              {text:2022,value:2022},
              {text:2023,value:2023},
            ],
            year_selected:0,
            year_index:0,
            month_list:[
              {text:1,value:1},
              {text:2,value:2},
              {text:3,value:3},
              {text:4,value:4},
              {text:5,value:5},
              {text:6,value:6},
              {text:7,value:7},
              {text:8,value:8},
              {text:9,value:9},
              {text:10,value:10},
              {text:11,value:11},
              {text:12,value:12}
           ],
           month_selected:0,
           month_index:0
        }
    },
    methods:{
        loadItem:function(){
            let that = this;
            let url = "/fang/personal/withdrawal_list";
            let time = this.year_selected+'-'+this.month_selected;
            that.$axios.post(url,this.$qs.stringify({
                access_token:that.$store.state._token01,
                page:that.page,
                sta_time:time
            })).then(function(response){
                let res = response.data;
                console.log(res);
                if(res.status == 1){
                  let d = res.data.item;
                  if(d.data.length>0){
                    d.data.forEach(function(val,index){
                        let ts_time = that.caculate_time(val.created_at);
                        let msg = '';
                        if(ts_time[0] != 0){
                            msg = ts_time[0]+'天前';
                        }else if(ts_time[1] != 0){
                            msg = ts_time[1]+'小时前';
                        }else if(ts_time[2] != 0){
                            msg = ts_time[2]+'分钟前';
                        }else if(ts_time[3] != 0){
                            msg = '刚刚';
                        }
                        val.timemsg = msg;
                        if(val.status=='1'){
                           val.withdraw_info = '提现成功';
                        }else if(val.status=='2'){
                           val.withdraw_info = '拒绝';
                        }else{
                           val.withdraw_info = '审核中';
                        }
                        that.data.push(val);
                    });
                    console.log(that.data);
                  }else{
                    that.$refs.scroll.forceUpdate()
                  }
                  that.user_info = res.data.user_info;
                  console.log(that.user_info);
                  that.people_info = res.data.people_info;
                  console.log(that.people_info);
                  that.people_amount = res.data.people_amount;
                  that.in_amount = res.data.in_amount;
                  that.ok_amount = res.data.ok_amount;
                  that.page = parseInt(d.current_page)+1;
                }
                else if (res.status == -1) {
                    that.noLogin();
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },
        pullUpLoadObj: function() {
          return this.pullUpLoad  ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          } : false;
        },
        onPullingUp:function(){
          this.loadItem();
        },
        caculate_time(created_at){
          let now_time = new Date().getTime();
          let old_time = parseInt(created_at) * 1000;
          let time = now_time - old_time;
          let day = parseInt(time / (24 * 60 * 60));//计算整数天数
          //计算出相差天数
          day =Math.floor(time/(24*3600*1000))

          //计算出小时数
          let leave1=time%(24*3600*1000)    //计算天数后剩余的毫秒数
          let hours=Math.floor(leave1/(3600*1000))
          //计算相差分钟数
          let leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
          let minutes=Math.floor(leave2/(60*1000))
          //计算相差秒数
          let leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
          let seconds=Math.round(leave3/1000)
          return [day,hours,minutes,seconds];
        },
        showTimePicker() {
         if (!this.picker) {
           this.picker = this.$createPicker({
             title: '请选择月份',
             data:[this.year_list,this.month_list],
             selectedIndex:[this.year_index,this.month_index],
             onSelect: this.selectHandle,
             onCancel: this.cancelHandle
           })
         }

         this.picker.show()
       },
       selectHandle(date, selectedVal, selectedText) {
         this.year_selected = date[0];
         this.month_selected = date[1];
         this.year_index = selectedVal[0];
         this.month_index = selectedVal[1];
         this.data=[];
         this.page=1;
         this.loadItem();
       },
       cancelHandle() {
         // this.$createToast({
         //   type: 'correct',
         //   txt: 'Picker canceled',
         //   time: 1000
         // }).show()
       }
    },
    computed: {
      getWindowHeight(){
        let height = document.documentElement.clientHeight || document.body.clientHeight;
        return height;
      },
      options() {
        return {
          pullUpLoad: this.pullUpLoadObj,
          scrollbar: false
        }
      }
    },
    activated:function(){
        //使用keep-alive以后进入页面只会触发activated
        let myDate = new Date();
        let year = myDate.getFullYear();
        let month = myDate.getMonth();
        for(let i = 0 ; i<this.year_list.length ; i++){
          if(year == this.year_list[i].value){
            this.year_index = i;
          }
        }
        this.month_index = month;
        this.year_selected = year;
        this.month_selected = month.length<2?'0':'' + (month+1);
        this.loadItem();
    },
}
</script>
<style  lang="stylus" rel="stylesheet/stylus">
.scroll-wrapper
  .cube-pulldown-wrapper
    .before-trigger
      font-size: 30px
      line-height: 30px
      align-self: flex-end
      span
        display: inline-block
        transition: all 0.3s
        color: #666
        &.rotate
          transform: rotate(180deg)
    .after-trigger
      .refresh-text
        color: grey
.scroll-list-wrap
  border: 1px solid rgba(0, 0, 0, 0.1)
  border-radius: 5px
  transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden
.foods-wrapper
  .food-item
    display: flex
    padding: 18px
    border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    &:last-child
      border-none()
      margin-bottom: 0
    .icon
      flex: 0 0 57px
      margin-right: 10px
    .food-content
      flex: 1
      .name
        margin: 2px 0 8px 0
        height: 14px
        line-height: 14px
        font-size: 14px
        color: rgb(7, 17, 27)
      .description, .extra
        line-height: 10px
        font-size: 10px
        color: rgb(147, 153, 159)
      .description
        line-height: 12px
        margin-bottom: 8px
      .extra
        .count
          margin-right: 12px
      .price
        font-weight: 700
        line-height: 24px
        .now
          margin-right: 8px
          font-size: 14px
          color: rgb(240, 20, 20)
        .old
          text-decoration: line-through
          font-size: 10px
          color: rgb(147, 153, 159)
      .cartcontrol-wrapper
        position: absolute
        right: 0
        bottom: 12px
</style>
<style scoped>
.nav_wrapper{
    height: 1.76rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav_wrapper .item{
    height: 100%;
    line-height: 1.76rem;
    flex: 1;
    color: #424242;
    font-size: .56rem;
    position: relative;
}
.nav_wrapper .action{
    color: #0FB199;
    font-weight:600;
}
.nav_wrapper .action::after{
    content: "";
    display: block;
    width: 1.8rem;
    height: .08rem;
    background: #0FB199;
    border-radius: .12rem;
    position: absolute;
    left: 50%;
    bottom: .24rem;
    transform: translate(-50%,0);
}
.jifen_bg{
    height: 2.88rem;
    display: flex;
    align-items: center;
    padding-left: .6rem;
}
.jifen_bg p{
    font-size: .52rem;
    color: #FFFFFF;
    margin-top: .2rem;
    text-align: left;
}
.nav_date{
    padding:.56rem 0 0 .64rem;
    text-align: left;
}
.nav_date > a{
    font-size: .52rem;
    color: #272727;
    position: relative;
}
.nav_date > a > i{
    content: "";
    display: block;
    width: .44rem;
    height: .28rem;
    position: absolute;
    right: -.6rem;
    top: 50%;
    transform: translate(0,-50%);
}
.wrapper{
    padding: 0 .64rem;
}
.wrapper .listfl{
    height:3.96rem;
    padding: .8rem .52rem .64rem .52rem;
    -moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
    box-sizing:border-box;
}
.wrapper .listfl .list_wp{
    height: 100%;
    display: flex;
}
.wrapper .listfl .touxiang{
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
}
.wrapper .listfl .touxiang img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.wrapper .listfl .content_right{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: .56rem;
}
.wrapper .listfl .content_right .top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.wrapper .listfl .content_right .top .user_name{
    font-size: .56rem;
    color: #363636;
    font-weight: 600;
}
.wrapper .listfl .content_right .top .jifen{
    font-size: .7rem;
    color: #272727;
    font-weight: bold;
}
.wrapper .listfl .content_right .top .jifen > em{
    font-size: .6rem;
}
.wrapper .listfl .content_right .info{
    font-size: .44rem;
    color: #333333;
    text-align: left;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
.wrapper .listfl .content_right .date_p{
    font-size: .44rem;
    color: #999999;
    text-align: left;
}

</style>
